import React, { useState } from 'react';
import { Modal, Form, Input, Popover } from 'antd';
import styles from './index.module.scss';
import {
	AGGREGATE_TYPES,
	DATE_AGGREGATE_TYPES,
	SORT_TYPES,
	DATE_TYPES,
	DL_TYPE,
	DECIMAL_PLACE_TYPES,
	DECIMAL_TYPES,
	QUOTA_DATE_AGGREGATE_TYPES,
	DATA_UNIT_TYPES
} from '../EnumConfig';
import { CheckOutlined, FormOutlined, RightOutlined } from '@ant-design/icons';

const WdDlEditor = ( props: any ) => {
	const { handleDelete, clickOver, handleUpdate, node, chartType } = props;
	const [ nameForm ] = Form.useForm();
	const { title: text, modelType: type, /* dataType, childrenType */ } = node;
	const dataType = String( node.dataType );

	const isDL = type === DL_TYPE;
	const isDate = DATE_TYPES.indexOf( dataType.toUpperCase() ) !== -1;
	const isDecimal = DECIMAL_TYPES.indexOf( dataType.toUpperCase() ) !== -1;
	const isQuota = chartType === 'Quota';

	let modalText = text,
		modifyInit = {};
	if ( node.originTitle ) {
		modifyInit = { modifyName: node.title };
		modalText = `${node.originTitle}[${node.title}]`;
	}

	const [ modifyVisible, setModifyVisible ] = useState( false );

	const onModifyClick = () => {
		setModifyVisible( true );
		clickOver();
	};

	const onModifyOk = () => {
		setModifyVisible( false );
		// modifyName: nameForm.getFieldValue( 'modifyName' )
		const { title } = node;
		handleUpdate( { originTitle: title, title: nameForm.getFieldValue( 'modifyName' ) } );
	};

	const setValueByChoose = ( value: string, name: string, unit?: boolean ) => {
		handleUpdate( { [name]: value }, unit );
	};

	return (
		<div>
			<ul style={{ padding: '0px' }}>
				<li className={styles.setting_item} onClick={onModifyClick}>
					<span className={styles.icon_container}>
						<FormOutlined />
					</span>
					修改展示列名称
				</li>
				{isDL && (
					<li className={styles.setting_item}>
						<ListComponent
							text="聚合方式"
							icon={<FormOutlined />}
							data={AGGREGATE_TYPES}
							value={node['aggregateType']}
							onValueChange={( value ) => setValueByChoose( value, 'aggregateType' )}
						></ListComponent>
					</li>
				)}
				{isDate && !isDL && !isQuota && (
					<li className={styles.setting_item}>
						<ListComponent
							text="日期数据聚合"
							icon={<FormOutlined />}
							data={DATE_AGGREGATE_TYPES}
							value={node['formatType']}
							onValueChange={( value ) => setValueByChoose( value, 'formatType' )}
						></ListComponent>
					</li>
				)}

				{/*核心指标图特有的的*/}
				{isQuota && isDate && (
					<li className={styles.setting_item}>
						<ListComponent
							text="日期数据聚合"
							icon={<FormOutlined />}
							data={QUOTA_DATE_AGGREGATE_TYPES}
							value={node['formatType']}
							onValueChange={( value ) => setValueByChoose( value, 'formatType' )}
						></ListComponent>
					</li>
				)}

				{isDL && isDecimal && (
					<li className={styles.setting_item}>
						<ListComponent
							text="小数位数"
							icon={<FormOutlined />}
							data={DECIMAL_PLACE_TYPES}
							value={node['precision']}
							onValueChange={( value ) => setValueByChoose( value, 'precision' )}
						></ListComponent>
					</li>
				)}

				{isDL && (
					<li className={styles.setting_item}>
						<ListComponent
							text="数据单位"
							icon={<FormOutlined />}
							data={DATA_UNIT_TYPES}
							value={node['dataUnit']}
							onValueChange={( value ) => setValueByChoose( value, 'dataUnit', true )}
						></ListComponent>
					</li>
				)}

				{/*	核心指标图不显示排序 */}
				{
					!isQuota && (
						<li className={styles.setting_item}>
							<ListComponent
								text="排序"
								data={SORT_TYPES}
								icon={<FormOutlined />}
								value={node['orderType']}
								onValueChange={( value ) => setValueByChoose( value, 'orderType' )}
							></ListComponent>
						</li>
					)
				}

				<li className={styles.setting_item} onClick={handleDelete}>
					<span className={`iconfont bdhshanchu ${styles.icon_container}`}></span>
					删除
				</li>
			</ul>

			<Modal
				title={modalText}
				visible={modifyVisible}
				okText="确定"
				cancelText="取消"
				width="600px"
				onCancel={() => {
					setModifyVisible( false );
				}}
				onOk={onModifyOk}
			>
				<Form name="basic" size="large" initialValues={modifyInit} form={nameForm}>
					<Form.Item label="展示名称" name="modifyName">
						<Input />
					</Form.Item>
				</Form>
			</Modal>
		</div>
	);
};

const ListComponent = ( props: any ) => {
	const { text, data = {}, onValueChange, value, icon } = props;
	const iconStyle = { fontWeight: 900 };
	return (
		<Popover
			placement="left"
			content={
				<ul style={{ padding: '0px' }}>
					{Object.keys( data ).map( ( v ) => {
						return (
							<li
								onClick={() => {
									onValueChange( data[v].value );
								}}
								className={`${styles.setting_item} ${value === data[v].value ? styles.active : ''}`}
								key={data[v].value}
							>
								<span className={styles.icon_container}>
									{value === data[v].value && <CheckOutlined />}
								</span>
								{data[v].label}
							</li>
						);
					} )}
				</ul>
			}
		>
			<div>
				<span className={styles.icon_container}>{icon}</span>
				{text}
				<span className={styles.icon_right}>
					<RightOutlined style={{ ...iconStyle }} />
				</span>
			</div>
		</Popover>
	);
};

export default React.memo( WdDlEditor );
